<template>
  <div class="one-or-four">
    <span class="four-screen" @click="changeView(true)" :class="isFour && 'four-screen-active'"></span>
    <span class="one-screen" @click="changeView(false)" :class="!isFour && 'one-screen-active'"></span>
  </div>
</template>

<script>
  export default {
    name: 'oneOrFour',

    props: ['oneOrFour'],

    data() {
      return {
        isFour: true
      }
    },

    methods: {
      changeView(flag) {
        this.isFour = flag;
        this.$emit('listenOneOrFour', flag)
      }
    }
  }
</script>

<style scoped lang="less">
  .one-or-four {
    float: left;

    .four-screen {
      width: 0.3rem;
      height: 0.3rem;
      display: block;
      background: url("../assets/common/four_screen.png");
      background-size: 100% 100%;
      float: left;
      margin-left: 0.4rem;
    }

    .one-screen {
      width: 0.3rem;
      height: 0.3rem;
      display: block;
      background: url("../assets/common/one_screen.png");
      background-size: 100% 100%;
      float: left;
      margin-left: 0.2rem;
    }

    .four-screen-active {
      background: url("../assets/common/four_screen_selected.png");
      background-size: 100% 100%;
    }

    .one-screen-active {
      background: url("../assets/common/one_screen_selected.png");
      background-size: 100% 100%;
    }
  }

</style>
